// components/dropdown/index.js
Component({
  // externalClasses: ["icon-class", "item-warp-class"],
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 传入数据的格式:
     * _showName, _selected : 非传入数据，应操作需要由js设置
      [
        { id: 1, name: "品牌", _showName: 'aa', _selected: true,
          items: [{ id: 1, name: "a品牌" }, { id: 2, name: "b品牌", _selected: true }]
        },
        { id: 2, name: "产地", 
          items: [{ id: 1, name: "a产地" }, { id: 2, name: "b产地" }]
        },
        { id: 3, name: "容量"
          items: [{ id: 1, name: "a容量" }, { id: 2, name: "b容量", _selected: false }]
        }
      ]
    */
    data: {
      type: Object,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTabData: null,
    currentTabIndex: null,
    /**
     * [{ id: 1, name: "a容量" }, { id: 2, name: "b容量", _selected: false }]
     */
    currentTabItemListData: [],
    // 其他
    isShowTabItem: false,  // 遮罩层
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 选择tab头
     */
    onSelectTabHead: function(e){
      const _this = this;
      const item = e.currentTarget.dataset.item;
      const index = e.currentTarget.dataset.index;
      const currentTabData = _this.data.currentTabData;
      /*
       * 同一tab再次点击处理 
       */
      if (currentTabData && currentTabData.id === item.id && currentTabData._selected===true){
        _this.properties.data[index]._selected = false;
        _this.setData({
          currentTabData: null,
          currentTabIndex: null,
          currentTabItemListData: [],
          data: _this.properties.data,
          isShowTabItem: false
        });
        return;
      }
      /*
       * 点击处理 
       */
      // 设置数据
      for (let item of _this.properties.data) {
        item._selected = false;
      }
      item._selected = true;
      _this.properties.data[index] = item;
      _this.setData({
        currentTabData: item,
        currentTabIndex: index,
        currentTabItemListData: item.items,
        data: _this.properties.data,
        isShowTabItem: true
      });
    },
    /**
     * 选择tab头
     */
    onSelectTabItem: function(e){
      const _this = this;
      const item = e.currentTarget.dataset.item;
      const index = e.currentTarget.dataset.index;
      const currentTabItemListData = _this.data.currentTabItemListData;
      const currentTabIndex = _this.data.currentTabIndex
      /*
       * 点击处理
       */
      item._selected = item._selected === true ? false : true;
      currentTabItemListData[index] = item;
      const currentTabData = _this.properties.data[currentTabIndex];
      currentTabData.items = currentTabItemListData;
      // 处理tabHead显示名称
      if (item._selected){
        currentTabData._showName = currentTabData._showName ? currentTabData._showName : item.name;
      }else{
        let flag = true;
        for (let listDataItem of currentTabItemListData){
          if (listDataItem._selected === true){
            flag = false;
            break;
          }
        }
        if (flag){
          currentTabData._showName = null;
        }
      }
      // 设置数据
      _this.setData({
        currentTabData: currentTabData,
        currentTabItemListData: currentTabItemListData,
        data: _this.properties.data
      });
    },
    /**
     * onReset
     */
    onReset: function(e){
      const _this = this;
      const currentTabItemListData = _this.data.currentTabItemListData;
      const currentTabIndex = _this.data.currentTabIndex
      //
      for (let item of currentTabItemListData){
        item._selected = false;
      }
      const currentTabData = _this.properties.data[currentTabIndex];
      currentTabData.items = currentTabItemListData;
      currentTabData._showName = null;
      _this.setData({
        currentTabData: currentTabData,
        currentTabItemListData: currentTabItemListData,
        data: _this.properties.data
      });
    },
    /**
     * onSubmit
     */
    onSubmit: function (e) {
      const _this = this;
      // 激活事件
      var myEventOption = {} // 触发事件的选项
      _this.triggerEvent(
        'submit',
        {
          data: _this.properties.data
        },
        myEventOption
      );
      // 更新数据
      for (let item of _this.properties.data) {
        item._selected = false;
      }
      _this.setData({
        data: _this.properties.data,
        isShowTabItem: false
      });

    }

  }
})
